<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室入口</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6" >
            <h2 class="text-center">聊天室登录</h2>
            <form>
                <div class="form-group">
                    <label for="username">您的昵称</label>
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名称" value="游客">
                </div>
                <div class="form-group">
                    <label for="room">聊天室名称</label>
                    <input type="text" class="form-control" id="room-name-input"
                           placeholder="请输入聊天室名称。（注意，房间名只允许英文。）" value="lobby">
                </div>

                <div class="form-group form-check">
                    <input type="checkbox" class="form-check-input" id="remember-me">
                    <label class="form-check-label" for="remember-me">记住密码</label>
                </div>

                <input id="room-name-submit" type="button" value="进入聊天" class="btn btn-primary">
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<script>
    // 记住密码
    // 检查本地存储是否有保存的用户名和密码
    const savedUsername = localStorage.getItem('username');
    const savedPassword = localStorage.getItem('room_name');

    // 将保存的用户名和密码填充到登录表单
    if (savedUsername && savedPassword) {
      document.getElementById('username').value = savedUsername;
      document.getElementById('room-name-input').value = savedPassword;
    }

    // 监听勾选框的变化
    document.getElementById('remember-me').addEventListener('change', function (event) {
      if (this.checked) {
        // 保存用户名和密码到本地存储
        var username = document.getElementById('username')
        var room_name = document.getElementById('room-name-input')

        if (username && room_name)
        {
            username = username.value;
            room_name = room_name.value;
        }
        else
        {
            return;
        }

        localStorage.setItem('username', username);
        localStorage.setItem('room_name', room_name);

        console.log("阿狸提示：已保存账号和密码:",username,room_name);

      } else {
        // 清除本地存储的用户名和密码
        localStorage.removeItem('username');
        localStorage.removeItem('room_name');
      }
    });


    document.querySelector('#username').focus();
    document.querySelector('#room-name-input').onkeyup = function (e) {
        if (e.keyCode === 13) {  // enter, return
            document.querySelector('#room-name-submit').click();
        }
    };

    document.querySelector('#room-name-submit').onclick = function (e) {
        var roomName = document.querySelector('#room-name-input').value;
        var username = document.querySelector('#username').value;

        var url = '/chat/' + roomName + '/?username=' + username;
        window.location.href = url;
    };
</script>
</body>
</html>